<script setup>
  const props = defineProps({
    // 单个房源对象
    item: {
      type: Object,
      required: true
    },
    // 下标
    index: Number
  })

  const emit = defineEmits(['error'])

  const gotoDetailPage = () => {
    uni.navigateTo({
      url: `/pages/index/detail?id=${props.item.houseId}`
    })
  }
  // 图片加载错误时
  const onError = () => {
    emit('error', props.index)
  }
</script>

<template>
  <view
    class="bit-house-item"
    @click="gotoDetailPage"
  >
    <image
      :src="props.item.headImage"
      class="bit-house-item-image"
      lazy-load
      @error="onError"
    />
    <view class="bit-house-item-info">
      <view class="main">
        <view class="bit-house-item-info-title"> {{ props.item.title }} </view>
        <view class="bit-house-item-info-desc">
          <text>{{ props.item.area }}㎡</text>
          <bit-icon
            class="vertical-line"
            color="#dedede"
            size="20"
            >&#xe610;</bit-icon
          >
          <text>朝{{ props.item.position }}</text>
          <bit-icon
            class="vertical-line"
            color="#dedede"
            size="20"
            >&#xe610;</bit-icon
          >
          <text>{{ props.item.regionName }}</text>
        </view>
      </view>

      <view class="bit-house-item-info-price">
        <text style="font-size: 24rpx; position: relative; top: 2rpx">￥</text
        ><text style="font-size: 30rpx">{{ props.item.price }}</text
        ><text style="font-size: 24rpx"> /月</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  .bit-house-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 200rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    border-radius: 16rpx;
    background-color: #fff;
    &-image {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      background-color: transparent;
      object-fit: cover;
    }
    &-info {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      justify-content: space-between;
      &-title {
        font-size: var(--font-size-md);
        font-weight: 400;
        color: var(--text-color-dark);
      }
      &-desc {
        display: flex;
        align-items: center;
        height: 33rpx;
        margin-top: 10rpx;
        font-size: var(--font-size-xs);
        color: var(--text-color-middle);
        .vertical-line {
          margin: 0 10rpx;
        }
      }
      &-price {
        display: flex;
        justify-self: flex-end;
        height: 42rpx;
        align-items: flex-end;
        color: #ff5c02;
      }
    }
  }
</style>
